<%@ page pageEncoding="utf-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<style type="text/css">
	.ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
	div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
	div#rMenu ul li{
		margin: 1px 0;
		padding: 0 5px;
		cursor: pointer;
		list-style: none outside none;
		background-color: #DFDFDF;
	}
	
	ul.ztree {
		margin-top: 10px;
		border: 1px solid #617775;
		background: #f0f6e4;
		width:500px;
		height:650px;
		padding-top: 25px;
		overflow-y:scroll;
		overflow-x:auto;
	}
</style>
<sf:token id="menutree_delete"/>
<sf:token id="menutree_drag"/>
<div class="r_location">
	<i class="r_txtico"></i> 运营管理 &gt; 菜单树管理
</div>

       


<!-- <div>
	<form id="upForm" action="menutree_manager/batch/insert" method="post" enctype='multipart/form-data'>
		<ul class="all_list">
			<li>
				<span class="all_title">上传文件：</span>
				<span><input type="file" name="excel" id="excel" class="all_input" style="width: 230px" validator='{"label":"文件","fileType":"xls"}' /></span>
				<span><input type="button" id="upBtn" value="导入" class="btn_big submitBtn" />&nbsp;&nbsp;&nbsp; <input type="button" id="downBtn" value="下载模板" class="btn_big" onclick="download();"  /> </span>
			</li>
		</ul>
	</form>
	<div id="data">
	</div>
</div> -->

<div>
	<ul id="menuTreeDiv" class="ztree"></ul>
</div>

<div id="rMenu">
	<ul>
			<li id="m_add" onclick="addMenu();">增加菜单</li>
			<li id="m_modify" onclick="modifyMenu();">修改菜单</li>
			<li id="m_del" onclick="deleteMenu();">删除菜单</li>
	</ul>
</div>

<script>
	// 批量导入菜单
	/* $(function() {
		$("#upForm").validator({}, {
			callback : function(results) {
				art.dialog({
					id:'switchDialog',
					lock:true,
					title:'批量导入提示',
					cancel:false,
					content:"正在导入菜单，请稍后......."
					});
				$("#upForm").ajaxSubmit(function(data){
					data = $.parseJSON(data);
					$("#data").html('');
					art.dialog.list["switchDialog"].close();
					art.dialog({
						icon : data.success,
						content : data.message,
						time:3
					}); 
					
					if(data.success == "succeed"){
						// 刷新树
						to_page("/menutree_manager/view/page");
					}
				});
			}
		});
	});
	 */
	// 下载批量导入权限的模板
	 
	
	// 菜单树相关脚本
	var zNodes = new Array();
	<c:forEach var="menuTreeNode" items="${menuTreeNodeList}" varStatus="status">
		zNodes.push({ id:<c:out value="${menuTreeNode.id }" />, pId:<c:out value="${menuTreeNode.parentId }"/>, name:'<c:out value="${menuTreeNode.name }" />',
			open:<c:out value="${menuTreeNode.open }" />, 
			drag:<c:out value="${canDrag}" />,
			/*	drag:<c:out value="${menuTreeNode.drag }" />, */
			drop:<c:out value="${menuTreeNode.drop }" />,
			childOuter:<c:out value="${menuTreeNode.childOuter }" />, childOrder:<c:out value="${menuTreeNode.childOrder }" />,
			dropInner:<c:out value="${menuTreeNode.dropInner }" />, dropRoot:<c:out value="${menuTreeNode.dropRoot }" />,
			noR:<c:out value="${menuTreeNode.noR }"/>
		});
	</c:forEach>

	var setting = {
		view : {
			expandSpeed : "",
		//	addHoverDom : addHoverDom,
		//	removeHoverDom : removeHoverDom,
			selectedMulti : false,
			dblClickExpand: false
		},
		edit : {
			enable : true,
			showRemoveBtn: false,
			showRenameBtn: false
		},
		check: {
			enable: false
		},
		data : {
			simpleData : {
				enable: true
			}
		},
		callback : {
	//		beforeRemove : beforeRemove,
			onRightClick: OnRightClick
		}
	};

	function filter(treeId, parentNode, childNodes) {
		if (!childNodes)
			return null;
		for ( var i = 0, l = childNodes.length; i < l; i++) {
			childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
		}
		return childNodes;
	}
	
	
	/**
	 * 右键菜单的操作
	 */
	function OnRightClick(event, treeId, treeNode) {
		if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
			zTree.cancelSelectedNode();
			showRMenu("root", event.clientX, event.clientY + document.documentElement.scrollTop);
		} else if (treeNode && !treeNode.noR) {
			zTree.selectNode(treeNode);
			showRMenu("node", event.clientX, event.clientY + document.documentElement.scrollTop);
		}
	}

	function showRMenu(type, x, y) {
		$("#rMenu ul").show();
		//alert(type);
		if (type=="root") {
			//$("#rMenu ul").hide();
			$("#m_add").show();
			$("#m_modify").show();
			$("#m_del").show();
		} else {
			$("#m_add").show();
			$("#m_modify").show();
			$("#m_del").show();
		}
		rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

		$("body").bind("mousedown", onBodyMouseDown);
	}
	
	function hideRMenu() {
		if (rMenu) rMenu.css({"visibility": "hidden"});
		$("body").unbind("mousedown", onBodyMouseDown);
	}
	
	function onBodyMouseDown(event){
		if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
			rMenu.css({"visibility" : "hidden"});
		}
	}
	
	/**
	 * 新增菜单
	 */
	function addMenu() {
		hideRMenu();
		
		var treeNode = zTree.getSelectedNodes()[0];
		
		if(treeNode && treeNode.getParentNode()) {
			var msg = "无法新增：菜单树最多只允许两层";
			confirm(msg);
			return null;
		}
		
		if(treeNode != null) {
			 showDialog('cms/menutree_manager/add?rand=' + Math.random(), {id:treeNode.id, name:encodeURI(treeNode.name)}, {width:'600px', title:'新增菜单', lock:true});
		} else {
		 	showDialog('cms/menutree_manager/add?rand=' + Math.random(), {id:0, name:encodeURI('无')}, {width:'600px', title:'新增菜单', lock:true});
		}
	}
	
	/**
	 * 删除菜单
	 */
	function deleteMenu() {
		hideRMenu();
		var nodes = zTree.getSelectedNodes();
		if (nodes && nodes.length>0) {
			if (nodes[0].children && nodes[0].children.length > 0) {
				var msg = "要删除的菜单【" + nodes[0].name + "】是父菜单，无法删除！";
				art.dialog({icon:'succeed',content: msg,lock:true}).time(2);
			} else {
				var msg = "确认要删除的菜单【" + nodes[0].name + "】吗？";
				    art.dialog({
					lock:true,
				    content: msg,
				    ok: function () {
				    	jQuery.ajax({
							url: 'cms/menutree_manager/delete?id='+nodes[0].id + '&rand='+Math.random(),
							tokenId:'menutree_delete',
							success: function (data) {
								art.dialog({icon: data.success,content: data.message,lock:true}).time(2);
								if(data.success == 'succeed') {
									zTree.removeNode(nodes[0]);
								}
							}
						});
				    },
				    cancelVal: '关闭',
				    cancel: true //为true等价于function(){}
				}); 
			}
		}
	}
	
	/**
	 * 修改菜单
	 */
	function modifyMenu() {
		hideRMenu();
		
		var treeNode = zTree.getSelectedNodes()[0];
		
		showDialog('cms/menutree_manager/modify?rand=' + Math.random(), {id:treeNode.id,parentMenuName:
			(treeNode.getParentNode() == null || treeNode.getParentNode().name == null) ? encodeURI("无") : 
				encodeURI(treeNode.getParentNode().name)}, 
				{width:'600px', title:'修改菜单', lock:true});
	}
	

	var zTree, rMenu;
	$(document).ready(function() {
		$.fn.zTree.init($("#menuTreeDiv"), setting, zNodes);
		zTree = $.fn.zTree.getZTreeObj("menuTreeDiv");
		rMenu = $("#rMenu");
	//	zTree.setting.edit.drag.isCopy = true;
	//	zTree.setting.edit.drag.isMove = true;
	//	zTree.setting.edit.drag.prev = true;
	//	zTree.setting.edit.drag.inner = true;
	//	zTree.setting.edit.drag.next = true;
	});
	
	
	/**
	 * 删除一个菜单
	 */
/* 	 function deleteMenuSubmit(treeNode, zTree) {
		 jQuery.ajax({
			url: 'menutree_manager/delete?id='+treeNode.id,
			success: function (data) {
				art.dialog({icon: data.success,content: data.message,lock:true});
				if(data.success == 'succeed') {
					zTree.removeNode(treeNode);
				}
			}
		});
	} */
	
	function showDialog(url, param, options){
		menuMyDialog = art.dialog(options);// 初始化一个带有loading图标的空对话框
		jQuery.ajax({
			url: url,
			data : param,
			success: function (data) {
				menuMyDialog.content(data);// 填充对话框内容
			}
		});
	}


</script>